<!--
 * @Author: jinjing
 * @Date: 2024-11-23
 * @Description: 基金成立分析。
 -->
<template>
  <div class="content">
    <div class="chart-content">
      <div class="chart">
        <chart v-show="isShow"
          :options="options"
          style="width: 100%; height: 500px"
          @click="click"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseover="mouseover"
          @mouseout="mouseout"
          @globalout="globalout"
          @contextmenu="contextmenu"
          @chart="chartBar"
          />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getFundData } from '../duckdb';

const data = ref([]) 
const getData = async () => {
  const query = 'SELECT YEAR("incept dt") AS year, COUNT(ticker) AS value from fund_desc GROUP BY YEAR("incept dt") ORDER BY YEAR("incept dt") '
  data.value = await getFundData(query)
}

await getData()

import chart from '@/components/Chart.vue';
const options = ref({
  title: {
    text: '每年基金成立数量',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  // color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#fde2e2'],
  xAxis: {
    type: 'category',
    data: data.value.map(v => v.year),
    name: '年度'
  },
  yAxis: {
    type: 'value',
    name: '成立数量',
  },
  series: [
    {
      data: data.value.map(v => v.value),
      type: 'bar',
    },
  ],
})
const isShow = ref(true)
const click = (e) => {
  console.log('click-----', e)
}
const mousedown = (e) => {
  console.log('mousedown-----', e)
}
const mousemove = (e) => {
  console.log('mousemove-----', e)
}
const mouseover = (e) => {
  console.log('mouseover-----', e)
}
const mouseout = (e) => {
  console.log('mouseout-----', e)
}
const globalout = (e) => {
  console.log('globalout-----', e)
}
const contextmenu = (e) => {
  console.log('contextmenu-----', e)
}

const chartRef = ref(null)
const chartBar = (dom) => {
  chartRef.value = dom
}

</script>

<style>
.chart-content{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.chart{
  width: 80%;

  padding: 20px;
}
</style>